<template>
  <div class="ai-agent-optimized immersive-layout">
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="login"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />

    <div class="hero-section">
      <div class="hero-content">
        <div class="agent-avatar">
          <img
            :src="currentAgent.avatar"
            :alt="`${currentAgent.title} 头像`"
            class="avatar-img"
          />
        </div>
        <h1 class="app-title">{{ currentAgent.title }}</h1>
        <p class="app-description">{{ currentAgent.fullDescription }}</p>

        <div class="hero-actions">
          <button 
            class="btn-primary enlarged-btn" 
            :disabled="currentAgent.status === 0"
            @click="useApp"
            v-if="currentAgent.status === 1"
          >
            <i class="fas fa-rocket"></i>
            立即使用
          </button>
          <button 
            class="btn-primary enlarged-btn" 
            disabled
            v-else
          >
            <i class="fas fa-cog"></i>
            开发中
          </button>
        </div>
      </div>
    </div>

    <div class="content-wrapper">
      <div class="breadcrumb-nav">
        <div class="breadcrumb-content">
          <router-link to="/" class="breadcrumb-link blue-link">
            <i class="fas fa-home"></i>
            首页
          </router-link>
          <span class="breadcrumb-separator">/</span>
          <router-link to="/" class="breadcrumb-link blue-link">
            智能助手
          </router-link>
          <span class="breadcrumb-separator">/</span>
          <span class="breadcrumb-current">{{ currentAgent.title }}</span>
        </div>
      </div>

      <div class="tab-container">
        <div class="tab-header">
          <button
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-button', { active: activeTab === index }]"
            @click="activeTab = index"
          >
            <i :class="tab.icon"></i>
            {{ tab.label }}
          </button>
        </div>

        <div class="tab-content">
          <div v-if="activeTab === 0" class="demo-section">
            <div class="section-header">
              <h2><i class="fas fa-desktop"></i> 界面演示</h2>
            </div>
            <div class="demo-container">
              <div class="demo-window">
                <div class="window-header">
                  <div class="window-controls">
                    <span class="control red"></span>
                    <span class="control yellow"></span>
                    <span class="control green"></span>
                  </div>
                  <div class="window-title">
                    <img :src="currentAgent.avatar" :alt="currentAgent.title" class="window-avatar" />
                    {{ currentAgent.title }} - 页面展示
                  </div>
                </div>
                <div class="demo-content">
                  <div class="app-intro-image">
                    <img
                      :src="currentAgent.demoImage"
                      :alt="`${currentAgent.title} 演示界面`"
                      class="intro-image"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="activeTab === 1" class="app-intro-section">
            <div class="section-header">
              <h2><i class="fas fa-info-circle"></i> 应用介绍</h2>
            </div>
            <div class="intro-content">
              <p class="intro-text">{{ currentAgent.introduction }}</p>
            </div>
          </div>

          <div v-if="activeTab === 2" class="guide-section">
            <div class="section-header">
              <h2><i class="fas fa-book"></i> 使用指南</h2>
            </div>
            <div class="guide-container">
              <div class="guide-steps">
                <div class="step" v-for="(step, index) in currentAgent.steps" :key="index">
                  <div class="step-number">{{ index + 1 }}</div>
                  <div class="step-content">
                    <h3>{{ step }}</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门推荐部分 -->
      <div class="recommend-section">
        <div class="section-header">
          <h2><i class="fas fa-thumbs-up"></i> 热门推荐</h2>
        </div>
        <div class="recommendations-grid">
          <div
            class="recommendation-card"
            v-for="agent in recommendedAgents"
            :key="agent.id"
            @click="goToDetail(agent.id)"
          >
            <div class="rec-avatar-container">
              <img :src="agent.avatar" :alt="agent.title" class="rec-avatar" />
            </div>
            <div class="rec-info">
              <h3 class="rec-title">{{ agent.title }}</h3>
              <p class="rec-description">{{ agent.description }}</p>
              <div class="rec-meta">
                <span><i class="fas fa-user"></i> {{ agent.developer }}</span>
                <span><i class="fas fa-chart-line"></i> {{ agent.usageCount }}次使用</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'
const agentTemplates = [
  {
    id: 1,
    title: "千问模型多语言文档翻译AI助手",
    description: "「千问多语言文档翻译智能体模版」基于AI深度解析技术，一键实现多语言文档。",
    author: "周九",
    tags: ["qwen模型", "文档翻译", "AI助手"],
    category: "qa",
    avatar: "/img/avatar1.png",
    demoImage: "/img/img_1.png", // 新增演示图片字段
    fullDescription: "「千问多语言文档翻译智能体」基于AI深度解析技术，一键实现多语言文档精准翻译，保留原文格式与专业术语，支持100+语言互译。",
    introduction: "千问多语言文档翻译AI助手是一款基于先进AI翻译技术的文档处理工具，能够高质量地翻译各类文档，保持原文格式和专业术语的准确性，支持多种文件格式和语言组合。",
    developer: "周九",
    version: "v2.0.1",
    usageCount: 9870,
    status: 1, // 新增状态字段
    features: [
      { desc: "支持100+语言精准互译，涵盖主流语种与小语种" },
      { desc: "完美保留原文格式、表格、排版等元素" },
      { desc: "专业术语库支持，确保翻译准确性" },
      { desc: "支持大批量文档同时翻译，提高工作效率" }
    ],
    scenarios: [
      { desc: "合同、报告等商务文件精准翻译" },
      { desc: "论文、期刊等学术资料专业翻译" },
      { desc: "网站内容多语言本地化适配" },
      { desc: "API文档、技术手册准确翻译" }
    ],
    steps: [
      "上传需要翻译的文档（支持PDF、Word、PPT等格式）",
      "选择源语言和目标语言",
      "设置专业领域和术语偏好",
      "启动AI翻译引擎",
      "下载翻译结果或在线预览"
    ]
  },

  {
    id: 2,
    title: "智能通话洞察分析助手",
    description: "「智能通话洞察分析智能体模版」精准识别客户需求，自动标记有效/无效通话。",
    author: "李四",
    tags: ["音频解析", "语音分析", "客户洞察"],
    category: "service",
    avatar: "/img/avatar2.png",
    demoImage: "/img/img_2.png", // 新增演示图片字段
    fullDescription: "「智能通话洞察分析助手」基于先进语音识别与情感分析技术，自动分析通话内容，提取关键信息，识别客户意图与情感倾向，为客服质量评估与业务优化提供数据支持。",
    introduction: "智能通话洞察分析助手是一款基于先进语音识别与情感分析技术的通话分析工具。它能够高精度识别多种方言和口音，实时分析通话双方情感变化，识别满意度。自动提取客户需求、投诉点、购买意向等关键信息，基于多维度指标自动评分，提升客服质量。",
    developer: "李四",
    version: "v1.5.3",
    usageCount: 8920,
    status: 1, // 新增状态字段
    features: [
      { desc: "高精度语音识别，支持多种方言和口音" },
      { desc: "实时分析通话双方情感变化，识别满意度" },
      { desc: "自动提取客户需求、投诉点、购买意向等关键信息" },
      { desc: "基于多维度指标自动评分，提升客服质量" }
    ],
    scenarios: [
      { desc: "自动化客服通话质量检测与评估" },
      { desc: "从销售通话中识别潜在商机和客户需求" },
      { desc: "及时发现客户不满情绪，预防投诉升级" },
      { desc: "分析通话数据，发现业务优化点" }
    ],
    steps: [
      "上传通话录音或连接实时通话流",
      "设置分析维度（情感、关键词、业务点等）",
      "启动AI分析引擎",
      "查看分析报告与可视化图表",
      "导出分析结果或集成到CRM系统"
    ]
  },
  {
    id: 3,
    title: "Excel智能数据分析师",
    description: "基于AI技术，一键自动化生成深度数据报告和可视化图表，助力企业决策分析。[3](@ref)",
    author: "王五",
    tags: ["数据分析", "报告生成", "可视化", "AI驱动", "自动化"],
    category: "analytics",
    avatar: "/img/avatar3.png",
    demoImage: "/img/img_3.png", // 新增演示图片字段
    fullDescription: "Excel智能数据分析师是一款强大的AI驱动工具，能够自动处理各类数据格式，进行深度分析和洞察，生成专业的分析报告和交互式可视化图表。它集成了先进的大模型技术，支持实时数据监控、趋势预测和自动化报告生成，帮助用户快速挖掘数据价值。[3,5](@ref)",
    developer: "王五",
    version: "v2.0.0",
    usageCount: 15600,
    status: 0, // 新增状态字段
    introduction: "Excel智能数据分析师基于最新的自然语言处理和机器学习算法，能够智能解析数据，自动识别关键指标和异常点，生成图文并茂的专业报告。支持Excel、CSV、数据库等多种数据源，内置丰富的分析模板和可视化选项，满足不同行业的需求。该工具能够将复杂的数据转化为直观的洞察，大幅提升数据分析效率。[6,7](@ref)",
    features: [
      { desc: "支持多种数据格式导入，包括Excel、CSV、PDF等，实现无缝数据接入[3](@ref)" },
      { desc: "内置AI分析引擎，自动进行数据清洗、统计分析和趋势预测，减少人工干预[5](@ref)" },
      { desc: "一键自动化生成专业报告，包含图表和文字洞察，支持多格式导出" },
      { desc: "提供交互式可视化图表，支持自定义样式和探索，增强数据理解[2](@ref)" },
      { desc: "实时数据监控和自动更新报告功能，确保洞察时效性" }
    ],
    scenarios: [
      { desc: "企业业务数据分析和报告生成，如销售、运营分析，助力管理层决策[3](@ref)" },
      { desc: "市场调研数据可视化展示和竞争分析，提供市场洞察[7](@ref)" },
      { desc: "学术研究数据分析和论文辅助，提升研究效率[6](@ref)" },
      { desc: "财务报表自动生成和审计支持，确保财务数据准确性[4](@ref)" },
      { desc: "电商运营数据分析和用户行为报告，优化营销策略" }
    ],
    steps: [
      "导入数据文件或连接实时数据源",
      "选择分析目标和关键指标",
      "配置报告模板和可视化样式",
      "启动AI分析引擎进行自动处理",
      "查看生成报告并进行交互式探索",
      "导出报告或分享分析结果"
    ]
  },
  {
    id: 4,
    title: "用户评论智能分析机器人",
    description: "「用户评论智能分析机器人智能体模版」精准抓取小红书、B站、抖音用户评论。",
    author: "赵六",
    tags: ["评论分析", "用户分析", "客户洞察"],
    category: "service",
    avatar: "/img/avatar4.png",
    demoImage: "/img/img_4.png", // 新增演示图片字段
    fullDescription: "「用户评论智能分析机器人」基于AI情感分析与语义理解技术，自动抓取和分析各大平台用户评论，挖掘用户真实需求与情感倾向，为产品优化和营销策略提供数据支持。",
    introduction: "用户评论智能分析机器人能够自动抓取和分析各大社交平台的用户评论，通过AI技术识别用户情感倾向和关注点，帮助企业了解用户真实反馈，优化产品和服务。",
    developer: "赵六",
    version: "v1.8.2",
    usageCount: 5670,
    status: 1, // 新增状态字段
    features: [
      { desc: "支持小红书、B站、抖音等主流社交平台评论抓取" },
      { desc: "精准识别用户评论中的正面、负面和中性情感" },
      { desc: "自动发现热门话题和用户关注焦点" },
      { desc: "追踪用户评论趋势变化，发现潜在问题" }
    ],
    scenarios: [
      { desc: "分析用户对产品的评价和建议" },
      { desc: "监控竞品用户评论，了解市场动态" },
      { desc: "追踪品牌口碑变化，及时应对负面评价" },
      { desc: "从用户评论中发现产品改进机会" }
    ],
    steps: [
      "设置监控平台和关键词",
      "配置分析维度和时间范围",
      "启动评论抓取和分析",
      "查看分析报告和可视化图表",
      "导出分析结果或设置预警通知"
    ]
  },
  {
    id: 5,
    title: "热点话题AI助手",
    description: "「热点话题AI助手智能体模版」实时抓取B站、抖音等全网热点，智能追踪用户兴趣。",
    author: "钱七",
    tags: ["新闻助手", "微博热搜", "抖音热榜"],
    category: "analytics",
    avatar: "/img/avatar5.png",
    demoImage: "/img/img_5.png", // 新增演示图片字段
    fullDescription: "「热点话题AI助手」基于AI大数据分析技术，实时追踪全网热点话题，智能分析用户兴趣变化，为内容创作和营销策略提供实时数据支持。",
    introduction: "热点话题AI助手能够实时监控各大社交平台的热点话题，通过AI分析技术识别热门趋势，帮助内容创作者和营销人员把握时机，创作更有吸引力的内容。",
    developer: "钱七",
    version: "v1.3.5",
    usageCount: 6890,
    status: 1, // 新增状态字段
    features: [
      { desc: "实时监控微博、抖音、B站等平台热点" },
      { desc: "基于用户兴趣智能推荐相关热点" },
      { desc: "预测热点话题发展趋势和持续时间" },
      { desc: "生成定制化热点分析报告" }
    ],
    scenarios: [
      { desc: "为自媒体创作者提供热点灵感" },
      { desc: "基于热点策划营销活动和广告内容" },
      { desc: "研究用户兴趣变化和市场趋势" },
      { desc: "实时发现突发热点，及时响应" }
    ],
    steps: [
      "设置关注领域和关键词",
      "选择监控平台和时间范围",
      "启动热点监控和分析",
      "查看热点榜单和趋势图表",
      "定制报告或设置推送通知"
    ]
  },
  {
    id: 6,
    title: "智能文档信息提取助手",
    description: "「智能文档信息提取助手智能体模版」快速提取合同、报告、政策等文档关联。",
    author: "孙八",
    tags: ["智能助手", "长文本解析", "表格解析"],
    category: "assistant",
    avatar: "/img/avatar6.png",
    demoImage: "/img/img_6.png", // 新增演示图片字段
    fullDescription: "「智能文档信息提取助手」基于AI自然语言处理技术，快速解析和提取各类文档中的关键信息，支持合同、报告、政策文件等多种文档类型，提高信息处理效率。",
    introduction: "智能文档信息提取助手能够自动解析各类文档，提取关键信息和数据，大幅提高文档处理效率。无论是合同条款、报告数据还是政策要点，都能快速准确地提取出来。",
    developer: "孙八",
    version: "v1.6.7",
    usageCount: 4320,
    status: 1, // 新增状态字段
    features: [
      { desc: "支持Word、PDF、PPT等多种文档格式" },
      { desc: "自动提取文档中的关键数据和信息" },
      { desc: "精准识别和提取文档中的表格数据" },
      { desc: "自动生成文档摘要，快速了解文档内容" }
    ],
    scenarios: [
      { desc: "快速提取合同关键条款和信息" },
      { desc: "分析报告数据，提取关键结论" },
      { desc: "解析政策文件，提取重点内容" },
      { desc: "为学术研究提取文献关键信息" }
    ],
    steps: [
      "上传需要分析的文档",
      "选择提取的信息类型和格式",
      "启动AI解析引擎",
      "查看提取结果和摘要",
      "导出提取数据或集成到其他系统"
    ]
  },
  {
    id: 7,
    title: "Kimi公文写作AI助手",
    description: "「Kimi公文写作AI助手智能体模版」精准解析用户需求，一键生成规范严谨的正式文书。",
    author: "禾杨",
    tags: ["公文写作", "AI助手", "办公工具"],
    category: "assistant",
    avatar: "/img/avatar7.png",
    demoImage: "/img/img_7.png", // 新增演示图片字段
    fullDescription: "「Kimi公文写作AI助手」基于AI深度解析技术，精准理解用户需求，一键生成规范严谨的正式文书与公文材料，大幅提升公文写作效率与质量。",
    introduction: "Kimi公文写作AI助手是一款专业的智能公文写作工具，能够根据用户需求自动生成各类正式文书。它内置丰富的公文模板和规范要求，确保生成的文档格式正确、内容严谨。支持通知、报告、函件、请示等多种公文类型，特别适合政府机关、企事业单位的日常公文写作需求。",
    developer: "禾杨",
    version: "v2.1.0",
    usageCount: 12560,
    status: 1, // 新增状态字段
    features: [
      { desc: "智能解析用户写作需求，理解文档类型和内容要求" },
      { desc: "基于国家标准公文格式，自动生成规范严谨的正式文书" },
      { desc: "内置通知、报告、函件、请示等多种公文模板" },
      { desc: "智能优化文档结构和语言表达，提升文档质量" }
    ],
    scenarios: [
      { desc: "政府机关日常公文、通知、报告的快速起草" },
      { desc: "企事业单位内部文件、商务函件的规范生成" },
      { desc: "合同、协议等法律文书的标准化起草" },
      { desc: "各类工作总结、汇报材料的智能生成" }
    ],
    steps: [
      "选择公文类型和适用场景",
      "输入基本信息和核心内容要求",
      "设置文档格式和风格偏好",
      "启动AI写作引擎生成初稿",
      "审阅修改并导出最终文档"
    ]
  },
  {
    id: 8,
    title: "电商直播AI脚本生成器",
    description: "「电商直播AI脚本生成器智能体模版」智能策划直播流程、精准生成高转化技术。",
    author: "吴十",
    tags: ["电商直播", "直播效率", "脚本生成"],
    category: "analytics",
    avatar: "/img/avatar8.png",
    demoImage: "/img/img_8.png", // 新增演示图片字段
    fullDescription: "「电商直播AI脚本生成器」基于AI大数据分析和自然语言生成技术，智能生成高转化率的电商直播脚本，优化直播流程和话术，提高直播销售效果。",
    introduction: "电商直播AI脚本生成器能够根据产品特点和目标受众，自动生成专业的直播脚本，包括产品介绍、互动环节、促销话术等，帮助主播提升直播效果和销售转化率。",
    developer: "吴十",
    version: "v1.4.2",
    usageCount: 5560,
    status: 1, // 新增状态字段
    features: [
      { desc: "智能分析产品特点和卖点" },
      { desc: "自动生成完整的直播脚本和流程" },
      { desc: "优化直播话术，提高转化率" },
      { desc: "根据直播效果实时调整脚本" }
    ],
    scenarios: [
      { desc: "为商品直播生成专业脚本" },
      { desc: "为促销活动设计直播流程" },
      { desc: "分析直播数据，优化脚本效果" },
      { desc: "结合热点话题设计直播内容" }
    ],
    steps: [
      "输入直播产品和目标",
      "选择直播风格和时长",
      "启动AI脚本生成",
      "查看和编辑直播脚本",
      "导出脚本或直接推送到直播平台"
    ]
  }
];
export default {
  name: 'AIAgentImmersive',
  components: {
    NavBar,
    Footer
  },
  data() {
    return {
      isLiked: false,
      likeCount: 128,
      stepDetails: [
        "支持PDF、Word、PPT等多种格式文档上传，最大支持100MB文件大小",
        "系统自动识别源语言，也可手动指定，支持100+种目标语言选择",
        "可选择金融、法律、医疗等专业领域，上传自定义术语库确保翻译准确性",
        "使用先进的AI翻译引擎，保持原文格式的同时进行高质量翻译",
        "支持下载翻译结果或直接在平台预览，保留原始文档格式和排版",
        "提供详细的翻译质量报告，包括准确率评估和术语一致性检查"
      ],
      activeTab: 0,
      tabs: [
        { label: '界面演示', icon: 'fas fa-desktop' },
        { label: '应用介绍', icon: 'fas fa-info-circle' },
        { label: '使用指南', icon: 'fas fa-book' }
      ]
    };
  },
  computed: {
    currentAgent() {
      const id = parseInt(this.$route.params.id);
      return agentTemplates.find(agent => agent.id === id) || agentTemplates[0];
    },
    recommendedAgents() {
      const currentId = parseInt(this.$route.params.id);
      return agentTemplates
        .filter(agent => agent.id !== currentId)
        .sort((a, b) => b.usageCount - a.usageCount)
        .slice(0, 10);
    }
  },
  methods: {
    useApp() {
      this.$message({
        message: '即将跳转到应用使用页面',
        type: 'success'
      });
    },
    goToDetail(id) {
      this.$router.push({ name: 'AIAgentIntroDetail', params: { id: id } });
    },
    getCategoryName(category) {
      const categoryMap = {
        'assistant': '助手',
        'service': '服务',
        'analytics': '分析',
        'marketing': '营销',
        'sales': '销售'
      };
      return categoryMap[category] || '其他';
    }
  }
};
</script>

<style scoped>
.ai-agent-optimized.immersive-layout {
  background: #f8f9fa;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  padding-top: 60px; /* 避免被导航栏遮挡 */
}

.hero-section {
  background: white;
  color: #1e293b;
  padding: 60px 20px 40px;
  text-align: center;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.agent-avatar {
  width: 150px; /* 头像长宽改为200px */
  height: 150px;
  margin: 0 auto 25px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-title {
  font-size: 26px; /* 字体小2号，从42px改为36px */
  font-weight: 800;
  margin: 0 0 20px;
  color: #1e293b;
}

.app-description {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 auto 30px;
  max-width: 700px;
  color: #4b5563;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.enlarged-btn {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 10px;
  background: #3b82f6;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.enlarged-btn:hover {
  background: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.breadcrumb-nav {
  margin-bottom: 30px;
}

.breadcrumb-content {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #64748b;
}

.breadcrumb-link {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: #3b82f6;
}

.blue-link {
  color: #3b82f6;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #cbd5e1;
}

.breadcrumb-current {
  color: #1e293b;
  font-weight: 500;
}

.tab-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.tab-header {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #eaeaea;
}

.tab-button {
  flex: 1;
  padding: 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.tab-button:hover {
  background: #f0f4ff;
  color: #3b82f6;
}

.tab-button.active {
  background: white;
  color: #3b82f6;
  border-bottom: 3px solid #3b82f6;
}

.tab-content {
  padding: 30px;
}

.section-header {
  margin-bottom: 30px;
}

.section-header h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 15px;
}

.demo-container {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 30px;
}

.demo-window {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.window-header {
  background: #f1f3f4;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.window-controls {
  display: flex;
  gap: 6px;
}

.control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }

.window-title {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.demo-content {
  padding: 20px;
  text-align: center;
  background: white;
}

.intro-image {
  width: 95%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* 应用介绍部分样式 */
.app-intro-section {
  padding: 20px 0;
}

.intro-content {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 30px;
}

.intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #4b5563;
  text-align: justify;
}

.guide-container {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 30px;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.step {
  display: flex;
  gap: 20px;
  padding: 25px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.step-number {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #1e293b;
}

.step-content p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

/* 热门推荐部分样式 */
.recommend-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 一行展示5个智能体应用 */
  gap: 20px;
  margin-top: 20px;
}

.recommendation-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 280px;
}

.recommendation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.rec-avatar-container {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.rec-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-info {
  flex: 1;
  width: 100%;
}

.rec-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1e293b;
  line-height: 1.3;
}

.rec-description {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: #64748b;
}

.rec-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 1200px) {
  .hero-section {
    padding: 40px 20px 30px;
  }

  .recommendations-grid {
    grid-template-columns: repeat(4, 1fr); /* 中等屏幕显示4个 */
  }
}

@media (max-width: 992px) {
  .recommendations-grid {
    grid-template-columns: repeat(3, 1fr); /* 小屏幕显示3个 */
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 30px 20px;
  }

  .app-title {
    font-size: 28px;
  }

  .app-description {
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 15px;
  }

  .tab-header {
    flex-wrap: wrap;
  }

  .tab-button {
    flex: 0 0 50%;
    padding: 15px;
  }

  .recommendations-grid {
    grid-template-columns: repeat(2, 1fr); /* 移动端显示2个 */
    gap: 15px;
  }

  .recommendation-card {
    padding: 15px;
    height: 250px;
  }
}

@media (max-width: 480px) {
  .tab-button {
    flex: 0 0 100%;
  }

  .tab-content {
    padding: 20px;
  }

  .recommendations-grid {
    grid-template-columns: 1fr; /* 超小屏幕显示1个 */
  }

  .rec-avatar-container {
    width: 60px;
    height: 60px;
  }
}
</style>
